<template>
  <div class="articleView" v-if="article">
    <div class="videoBox">
      <video
        v-if="article.video.content.progressive"
        :src="
          article.video.content.progressive[
            article.video.content.progressive.length - 1
          ].url
        "
        autoplay
        style="height: 211px"
        :poster="article.cover"
        ref="video"
        @timeupdate="videoChange"
      ></video>
      <div
        v-if="article.video.content.progressive"
        class="lid"
        @click="noShowLid"
      >
        <div
          class="top"
          :class="{ top_leave: !isShowLid, top_enter: isShowLid }"
        >
          <div class="back" @click.stop="back">
            <van-icon name="arrow-left" size="22" color="white" />
          </div>
          <div class="share" @click.stop="share">
            <van-icon name="ellipsis" size="22" color="white" />
          </div>
        </div>
        <div class="stop-start" v-if="isShowLid">
          <div class="start" @click.stop="start" v-if="!videoStatus">
            <van-icon name="play" size="50" color="white" />
          </div>
          <div class="stop" @click.stop="stop" v-else>
            <van-icon name="pause" size="50" color="white" />
          </div>
        </div>
        <div
          class="buttom"
          :class="{ buttom_leave: !isShowLid, buttom_enter: isShowLid }"
        >
          <div class="currentTime">{{ currentTime }}</div>
          <van-slider
            v-model="value"
            active-color="#ee0a24"
            @change="changeCurrentTime"
            @input="changeCurrentTime"
            :max="duration"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <div class="duration">{{ duration_text }}</div>
          <div class="playbackRate" @click.stop="showActionSheet = true">
            倍数
          </div>
          <div class="full">
            <van-icon name="enlarge" size="22" color="white" />
          </div>
        </div>
      </div>
      <div v-else class="lid">
        <div class="top">
          <div class="back" @click.stop="back">
            <van-icon name="arrow-left" size="22" color="white" />
          </div>
          <div class="share" @click.stop="share">
            <van-icon name="ellipsis" size="22" color="white" />
          </div>
        </div>
        <div class="unSupported">
          <div class="text">该视频赞不支持在手机端播放</div>
          <div class="toWeb">去网站观看</div>
        </div>
      </div>
      <div
        class="endLid"
        v-if="isShowEndLid"
        :style="{ backgroundImage: `url(${article.cover})` }"
      >
        <div class="top">
          <div class="back" @click.stop="back">
            <van-icon name="arrow-left" size="22" color="white" />
          </div>
          <div class="share" @click.stop="share">
            <van-icon name="ellipsis" size="22" color="white" />
          </div>
        </div>
        <div class="replay" @click="replay">
          <svg
            t="1677230973895"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6309"
            width="32"
            height="32"
          >
            <path
              d="M512 0C227.328 0 0 227.328 0 512s227.328 512 512 512 512-227.328 512-512c0-28.672-18.944-47.616-47.616-47.616-28.672 0-47.616 18.944-47.616 47.616 0 227.328-189.44 417.28-417.28 417.28-227.328 0-417.28-189.44-417.28-417.28 0-227.328 189.44-417.28 417.28-417.28 75.776 0 161.28 18.944 218.112 66.56v9.728l-47.616 56.832c-18.944 18.944 0 56.832 28.672 56.832l218.112 9.728c18.944 0 37.888-28.672 37.888-47.616l-66.56-208.384c-9.728-28.672-47.616-37.888-66.56-9.728l-37.888 56.832C711.168 28.672 616.448 0 512 0z"
              p-id="6310"
              fill="#ffffff"
            ></path>
          </svg>
          <div class="text">重播</div>
        </div>
      </div>
    </div>
    <van-action-sheet
      cancel-text="取消"
      close-on-click-action
      v-model="showActionSheet"
      :actions="actionSheetActions"
      @select="onSelect"
      description="请选择倍数"
    />
    <div class="likeTabs"></div>
    <van-tabs
      v-model="tabsActive"
      sticky
      animated
      title-active-color="#000"
      title-inactive-color="#999"
      line-width="28px"
    >
      <van-tab
        v-for="(index, i) in 2"
        :key="index"
        :title="
          [
            '简介',
            `评论${
              article.count.count_comment == 0
                ? ''
                : article.count.count_comment
            }`,
          ][i]
        "
      >
        <ArticleIntroduction v-if="index == 1" :article="article" />
        <ArticleComment v-if="index == 2" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import ArticleIntroduction from "@/components/ArticleIntroduction.vue";
import ArticleComment from "@/components/ArticleComment.vue";

export default {
  name: "ArticleView",
  components: {
    ArticleIntroduction,
    ArticleComment,
  },
  data() {
    return {
      article: null,
      isShowLid: false,
      videoStatus: true,
      currentTime: "00:00",
      duration: 0,
      duration_text: "00:00",
      value: 0,
      showActionSheet: false,
      actionSheetActions: [
        { name: "0.5X" },
        { name: "1.0X" },
        { name: "1.25X" },
        { name: "1.5X" },
        { name: "2.0X" },
      ],
      tabsActive: 0,
      isShowEndLid: false,
    };
  },
  created() {
    this.$toast.loading({
      duration: 0,
      message: "加载中...",
      forbidClick: true,
    });
    let url;
    if (this.$route.query.id == 10510172 || this.$route.query.id == 11704000) {
      url = `/${this.$route.query.id}article.json`;
    } else {
      url = `https://apis.netstart.cn/xpc/article/${this.$route.query.id}`;
    }
    this.$axios.get(url).then((res) => {
      if (res.data.message == "OK") {
        // console.log(res.data.data);
        this.article = res.data.data;
        // console.log((this.article.duration / 60).toFixed(2));
        let duration1 =
          this.article.video.content.progressive[
            this.article.video.content.progressive.length - 1
          ].duration;
        this.duration_text = `${
          duration1 / 60 < 10
            ? "0" + Math.floor(duration1 / 60)
            : Math.floor(duration1 / 60)
        }:${
          duration1 % 60 < 10
            ? "0" + Math.floor(duration1 % 60)
            : Math.floor(duration1 % 60)
        }`;
        this.duration = this.article.duration;
        this.$toast.clear();
      } else {
        this.$toast.fail();
      }
    });
    this.tabsActive = Number(this.$route.query.value) || 0;
  },
  methods: {
    changeCurrentTime() {
      // console.log(this.value);
      this.$refs.video.currentTime = this.value;
      if (!this.videoStatus) {
        this.$refs.video.pause();
      }
    },
    videoChange() {
      this.value = this.$refs.video.currentTime;
      this.currentTime = `${
        this.$refs.video.currentTime / 60 < 10
          ? "0" + Math.floor(this.$refs.video.currentTime / 60)
          : Math.floor(this.$refs.video.currentTime / 60)
      }:${
        this.$refs.video.currentTime % 60 < 10
          ? "0" + Math.floor(this.$refs.video.currentTime % 60)
          : Math.floor(this.$refs.video.currentTime % 60)
      }`;
      // console.log(this.currentTime, this.$refs.video.currentTime);
    },
    noShowLid() {
      // console.log("noShowLid");
      this.isShowLid = !this.isShowLid;
    },
    back() {
      // console.log("back");
      window.history.go(-1);
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    start() {
      // console.log("start");
      // console.log(this.$refs.video);
      this.videoStatus = true;
      this.$refs.video.play();
    },
    stop() {
      // console.log("stop");
      this.videoStatus = false;
      this.$refs.video.pause();
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showActionSheet = false;
      // console.log(item.name.split("X")[0]);
      this.$refs.video.playbackRate = item.name.split("X")[0];
    },
    replay() {
      this.isShowEndLid = false;
      this.$refs.video.load();
      this.videoStatus = true;
    },
  },
  watch: {
    currentTime: function (newVal) {
      // console.log(newVal, this.duration);
      if (newVal == this.duration_text) {
        this.videoStatus = false;
        this.isShowLid = false;
        this.isShowEndLid = true;
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    from;
    // console.log(to, from);
    let browseHistory = JSON.parse(
      localStorage.getItem("nsBrowseHistory") || "[]"
    );
    if (browseHistory.indexOf(to.query.id) != -1) {
      browseHistory = browseHistory.filter((o) => o != to.query.id);
    }
    browseHistory.unshift(to.query.id);
    localStorage.setItem("nsBrowseHistory", JSON.stringify(browseHistory));
    next();
  },
};
</script>

<style lang="scss" scoped>
.articleView {
  padding-top: 211px;

  .videoBox {
    width: 100%;
    height: 211px;
    background-color: black;
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    video {
      width: 100%;
    }

    /*video隐藏全屏按钮*/
    video::-webkit-media-controls-fullscreen-button {
      display: none !important;
    }
    /*video隐藏音量控制*/
    video::-webkit-media-controls-volume-control-container {
      display: none !important;
    }

    .lid {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 211px;

      .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;

        .back {
          margin-left: 10px;
        }

        .share {
          margin-right: 10px;
        }
      }

      .top_leave {
        transform: translateY(-50px);
        transition: transform 0.5s;
      }

      .top_enter {
        transform: translateY(0);
        transition: transform 0.5s;
      }

      .stop-start {
        position: absolute;
        left: 162.5px;
        top: 80.5px;
      }

      .buttom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 12px;
        color: white;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .currentTime {
          margin-left: 15px;
        }

        :deep(.van-slider) {
          width: 200px;
        }

        .custom-button {
          width: 8px;
          height: 15px;
          border-radius: 3px;
          background-color: white;
        }

        .full {
          margin-right: 15px;
        }
      }

      .buttom_leave {
        transform: translateY(50px);
        transition: transform 0.5s;
      }

      .buttom_enter {
        transform: translateY(0);
        transition: transform 0.5s;
      }

      .unSupported {
        position: absolute;
        width: 100%;
        left: 0px;
        top: 69.5px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          font-size: 16px;
          color: white;
          margin-bottom: 10px;
        }

        .toWeb {
          height: 40px;
          line-height: 40px;
          border-radius: 20px;
          width: 100px;
          text-align: center;
          background-color: #e05239;
          font-size: 14px;
          color: white;
        }
      }
    }

    .endLid {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 211px;
      z-index: 999;
      background-size: 100%;

      .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;

        .back {
          margin-left: 10px;
        }

        .share {
          margin-right: 10px;
        }
      }

      .replay {
        width: 100%;
        position: absolute;
        left: 0;
        top: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          margin-right: 10px;
        }

        .text {
          font-size: 14px;
          color: white;
        }
      }
    }
  }
}

.likeTabs {
  height: 44px;
}

:deep(.van-sticky) {
  border-bottom: 1px solid #f7f7f7;
  position: fixed;
  top: 211px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

:deep(.van-tab__text) {
  font-weight: bold;
  font-size: 14px;
}
</style>
